import React, { Component } from 'react'
import { Input } from 'antd';
const { Search } = Input;

export default class Header extends Component {
    state = {
        value: ''
    }
    onAdd = value => {
        if (!value) {
            return;
        }
        this.props.onAdd(value);
        this.setState({
            value: ''
        });
    }

    onChange = e => {
        this.setState({
            value: e.target.value
        });
    }

    render() {
        return (
            <div>
                <Search
                    placeholder="input add to do list"
                    size="large"
                    enterButton="Add"
                    onSearch={this.onAdd}
                    onChange={this.onChange}
                    value={this.state.value}
                />
            </div>
        )
    }
}
